import React from 'react';
// import { Link } from 'react-router-dom';
import axios from 'axios';
import { Select } from 'antd';
import { contractPeriodApi } from 'shared/api';
import AlertModule from '../../../../shared/AlertModule';

import './index.less';

// console.log(contractPeriodApi);
const { Option } = Select;

const children = [];
for (let i = 0; i < 26; i++) {
  children.push(<Option key={i.toString(26) + i}> {i.toString(26) + i}</Option>);
}


export default class AddContract extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      visible: false,
      change: false,
      newContract: {},
      warn1: true,
      warn2: true,
    };
  }
  componentDidMount() {
    if (this.props.match.params.id !== undefined) {
      const api = `${contractPeriodApi}?id=${this.props.match.params.id}`;
      axios.get(api)
        .then((response) => {
          this.setState({ newContract: response.data.data });
          console.log(response.data.data);
        });
    }
  }
  handlOnChangeSelect=(value) => {
    console.log(value);
  }
  handlOnChange=(value, key) => {
    const { newContract } = this.state;
    newContract[key] = value;
    this.setState({ newContract: { ...this.state.newContract }, change: true });
    console.log(newContract);
  }
  redirectToContractDeadline() {
    this.props.history.push('/Contract/ContractDeadline');
  }
  showAlertModule=() => {
    if (this.state.change === true) {
      this.setState({ visible: true });
    } else {
      this.redirectToContractDeadline();
    }
  }
    closeAlertModule=() => {
      this.setState({ visible: false });
    }
    historyPush=() => {
      this.redirectToContractDeadline();
      this.setState({ visible: false });
    }
  sureAdd=() => {
    if (this.props.match.params.id === undefined) {
      const { newContract } = this.state;
      if (!newContract.name) {
        this.setState({ warn1: false });
      } else {
        this.setState({ warn1: true });
      }
      if (!newContract.amount) {
        this.setState({ warn2: false });
      } else {
        this.setState({ warn2: true });
      }
      axios.post(contractPeriodApi, {
        name: newContract.name,
        descr: newContract.descr,
        amount: newContract.amount,
      })
        .then((response) => {
          if (response.data.code === 200) {
            this.props.history.push('/Contract/ContractDeadline');
          }
        });
    } else {
      const { newContract } = this.state;
      axios.post(contractPeriodApi, {
        id: this.props.match.params.id,
        name: newContract.name,
        descr: newContract.descr,
        amount: newContract.amount,
      })
        .then(() => {
          this.props.history.push('/Contract/ContractDeadline');
        });
    }
  }
  render() {
    const id = this.props.match.params.id;
    return (
      <div className="addContract">
        <div className="contract">
          <div>
            <h3>{id ? '编辑合同' : '添加合同'}</h3>
          </div>
          <div className="contractInput">
            <div>
              <span>名称</span>
              <input
                placeholder="请输入证书名称"
                className={this.state.warn1 ? '' : 'borderRed'}
                value={this.state.newContract.name}
                type="text"
                onChange={e => this.handlOnChange(e.target.value, 'name')}
              />
              <span className="warnSpan">{this.state.warn1 ? '' : '*必须填'}</span>
            </div>
            <div>
              <span>月份数</span>
              <input
                placeholder="请输入证书月份数"
                className={this.state.warn2 ? '' : 'borderRed'}
                value={this.state.newContract.amount}
                type="number"
                onChange={e => this.handlOnChange(e.target.value, 'amount')}
              />
              <span className="warnSpan">{this.state.warn2 ? '' : '*必须填'}</span>
            </div>
            <div>
              <span>描述/备注</span>
              <input
                placeholder="请输入描述备注"
                value={this.state.newContract.descr}
                type="text"
                onChange={e => this.handlOnChange(e.target.value, 'descr')}
              />
              <span />
            </div>
          </div>
          <div className="sureButton">
            <button onClick={this.sureAdd} >保存</button>
            <a onClick={this.showAlertModule} className="cancelM">取消</a>
            <AlertModule visible={this.state.visible} onCancel={this.closeAlertModule} onOk={this.historyPush} />
          </div>
        </div>
      </div>
    );
  }
}
